<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harmony Style - 完整示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--color-background-secondary);
      min-height: 100vh;
    }
    
    .main-content {
      padding-top: var(--titlebar-height);
      padding-bottom: var(--tab-height);
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: calc(24 * var(--unit));
    }
    
    .hero-section {
      text-align: center;
      padding: calc(64 * var(--unit)) calc(24 * var(--unit));
      background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand60) 100%);
      color: var(--color-font-on-primary);
      margin-bottom: calc(32 * var(--unit));
    }
    
    .hero-title {
      font-size: var(--font-size-display-medium);
      font-weight: var(--font-weight-display);
      color: var(--color-font-on-primary);
      margin-bottom: calc(16 * var(--unit));
    }
    
    .hero-subtitle {
      font-size: var(--font-size-title-medium);
      color: var(--color-font-on-primary);
      opacity: 0.9;
      margin-bottom: calc(32 * var(--unit));
    }
    
    .example-section {
      background: var(--color-comp-background-primary);
      border-radius: calc(12 * var(--unit));
      padding: calc(32 * var(--unit));
      margin-bottom: calc(32 * var(--unit));
      box-shadow: 0 calc(2 * var(--unit)) calc(8 * var(--unit)) rgba(0, 0, 0, 0.1);
    }
    
    .example-section-title {
      font-size: var(--font-size-title-large);
      font-weight: var(--font-weight-title);
      color: var(--color-font-primary);
      margin-bottom: calc(24 * var(--unit));
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: calc(24 * var(--unit));
    }
    
    .feature-card {
      padding: calc(24 * var(--unit));
      border-radius: calc(8 * var(--unit));
      background: var(--color-background-secondary);
    }
  </style>
</head>
<body>
  <!-- 标题栏 -->
  <div class="titlebar">
    <div class="titlebar-left">
      <button class="titlebar-button" aria-label="菜单">
        <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M3 18h18v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>
        </svg>
      </button>
    </div>
    <div class="titlebar-center">
      <h1 class="titlebar-title">Harmony Style</h1>
    </div>
    <div class="titlebar-right">
      <button class="titlebar-button" aria-label="更多选项">
        <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
      </button>
    </div>
  </div>
  
  <div class="main-content">
    <!-- Hero 区域 -->
    <div class="hero-section">
      <h1 class="hero-title">Harmony Style</h1>
      <p class="hero-subtitle">基于鸿蒙设计规范的 CSS 组件库</p>
      <div class="button-group">
        <button class="button button-primary button-large">开始使用</button>
        <button class="button button-outline button-large hero-button-outline">查看文档</button>
      </div>
    </div>
    
    <div class="container">
      <!-- 特性展示 -->
    <div class="example-section">
      <h2 class="example-section-title">核心特性</h2>
        <div class="feature-grid">
          <div class="feature-card">
            <h3 class="title title-sub-medium">🎨 设计规范</h3>
            <p class="text">完全基于鸿蒙设计指南，确保界面一致性</p>
          </div>
          <div class="feature-card">
            <h3 class="title title-sub-medium">🎯 CSS 变量</h3>
            <p class="text">使用 CSS 变量，支持主题定制和动态修改</p>
          </div>
          <div class="feature-card">
            <h3 class="title title-sub-medium">📱 响应式</h3>
            <p class="text">完美适配各种屏幕尺寸和设备类型</p>
          </div>
          <div class="feature-card">
            <h3 class="title title-sub-medium">🌙 深色模式</h3>
            <p class="text">自动支持系统深色模式，提供更好的视觉体验</p>
          </div>
        </div>
      </div>
      
      <!-- 组件展示 -->
    <div class="example-section">
      <h2 class="example-section-title">组件展示</h2>
        
        <div class="grid mb-medium">
          <div class="col-12 col-6">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">按钮组件</h3>
              </div>
              <div class="card-content">
                <div class="button-group">
                  <button class="button button-primary">主要</button>
                  <button class="button button-secondary">次要</button>
                  <button class="button button-text">文本</button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-12 col-6">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">输入框组件</h3>
              </div>
              <div class="card-content">
                <input type="text" class="input w-100" placeholder="请输入内容">
              </div>
            </div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">列表组件</h3>
          </div>
          <ul class="list">
            <li class="list-item">
              <div class="list-item-content">
                <h3 class="list-item-title">列表项 1</h3>
                <p class="list-item-description">这是列表项的描述</p>
              </div>
            </li>
            <li class="list-item">
              <div class="list-item-content">
                <h3 class="list-item-title">列表项 2</h3>
                <p class="list-item-description">这是列表项的描述</p>
              </div>
            </li>
            <li class="list-item">
              <div class="list-item-content">
                <h3 class="list-item-title">列表项 3</h3>
                <p class="list-item-description">这是列表项的描述</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 快速开始 -->
    <div class="example-section">
      <h2 class="example-section-title">快速开始</h2>
        <div class="card outlined">
          <div class="card-content">
            <h3 class="title title-sub-medium mb-medium">安装</h3>
            <pre class="code-block"><code>npm install harmony-style</code></pre>
            
            <h3 class="title title-sub-medium mb-medium mt-large">引入</h3>
            <pre class="code-block"><code>&lt;link rel="stylesheet" href="harmony-style.css"&gt;</code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部标签栏 -->
  <div class="bottom-tab-container">
    <div class="tab-item active">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
      <span class="tab-text active">首页</span>
    </div>
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      <span class="tab-text">消息</span>
    </div>
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>
      <span class="tab-text">收藏</span>
    </div>
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
      </svg>
      <span class="tab-text">设置</span>
    </div>
  </div>
</body>
</html>

